<template>
  <div style="width: 100%;height: 100%;padding: 12px;display: flex;">
    <div style="flex: 1;position: relative;">
      <div class="data1">
        <div class="qiu">
            <p>70%</p>
        </div>
        <span>折扣率</span>
      </div>
    </div>
    <div style="flex: 1;position: relative;">
      <div class="data1">
        <div class="qiu">
            <p>70%</p>
        </div>
        <span>折扣率</span>
      </div>
    </div>
    <div style="flex: 1;position: relative;">
      <div class="data1">
        <div class="qiu">
            <p>70%</p>
        </div>
        <span>折扣率</span>
      </div>
    </div>
    <!-- <div class="data1">
      <div class="qiu">
          <p>70%</p>
      </div>
      <span>折扣率</span>
    </div>
    <div class="data2">
      <div class="qiu">
          <p>70%</p>
      </div>
      <span>折扣率</span>
    </div>
    <div class="data3">
      <div class="qiu">
          <p>70%</p>
      </div>
      <span>折扣率</span>
    </div>
    <div class="data4">
      <div class="qiu">
          <p>70%</p>
      </div>
      <span>折扣率</span>
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() {
  },
  methods: {}
}
</script>
<style lang="less" scoped>
  .data1,.data2,.data3,.data4 {
      color:#fff;
      text-align: center;
      position: absolute;
      width: 8rem;
      height: 8rem;
      background: url(../../../assets/golbal_info/di.png) no-repeat bottom center;
      background-size: contain;
      padding-top: 2%;
      box-sizing: border-box;
      .qiu {
          position: relative;
          width: 4rem;
          height: 4rem;
          margin: auto;
          display: table;
          p {
              display:table-cell;
              vertical-align: middle;
          }
      }
      .qiu::before {
          content:'';
          display: block;
          width: 4rem;
          height: 4rem;
          position: absolute;
          left: 50%;
          top: 50%;
          transform:translate(-50%,-50%);
          border-radius: 50%;
          border:3px solid rgba(255,255,255,.5);
          animation:scale 2s linear infinite;
      }
      span {
          font-size: 0.8rem;
      }
  }
  .data1 {
      left: 0%;
      top: 10%;
      .qiu {
          background: url(../../../assets/golbal_info/cicle04.png) no-repeat center;
          background-size: 100%;
      }
  }
  .data2 {
      right: 5%;
      top: 8%;
      .qiu {
          background: url(../../../assets/golbal_info/cicle02.png) no-repeat center;
          background-size: 100%;
      }
  }
  .data3 {
      left: 0;
      bottom:3%;
      .qiu {
          background: url(../../../assets/golbal_info/cicle03.png) no-repeat center;
          background-size: 100%;
      }
  }
  .data4 {
      right:6%;
      bottom: 3%;
      .qiu {
          background: url(../../../assets/golbal_info/cicle01.png) no-repeat center;
          background-size: 100%;
      }
  }

</style>
